<template>
    <form @submit.prevent="login">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" v-model="username">
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" v-model="password">
        </div>
        <button type="submit">Login</button>
    </form>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const username = ref('')
const password = ref('')

async function login() {
    try {
        const response = await axios.post('http://localhost:5000/login', {
            username: username.value,
            password: password.value
        })
        console.log(response)
        if (response.data.status === 200) {
            // 登录成功, 跳转到首页
            router.push({ name: 'Home' });
        } else {
            console.error(response.data.status);
        }
        console.log(response.data);

    } catch (error) {
        console.error('Error:', error);
    }
}

</script>